<template>
	<view class="interview_content">
		<view class="basic_information">
			<view class="interview_title">Basic Information</view>
			<view class="basic_viewst">
				<view class="basic_item">
					<text>Student Name</text>
					<input type="text" placeholder-class="font-color" v-model="userName" disabled />
				</view>
				<view class="basic_item">
					<text>Visit Date & Time</text>
					<input type="text" placeholder-class="font-color" v-model="times" disabled />
				</view>
				<view class="basic_item">
					<text>School Name</text>
					<input type="text" placeholder-class="font-color" v-model="schoolName" disabled />
				</view>
				<view class="basic_item">
					<text>Year Level</text>
					<input type="text" placeholder-class="font-color" v-model="annualLevel" disabled />
				</view>
				<view class="basic_item" style="flex-direction: column;">
					<text>Homestay Address （If knows）</text>
					<input type="text" style="width: 100%; text-align: left; margin-top: 10px;" placeholder-class="font-color" v-model="address" disabled />
				</view>
				<view class="basic_item" style="flex-direction: column;">
					<text>Homestay Contact ( If knows )</text>
					<input type="text" style="width: 100%; text-align: left; margin-top: 10px;" placeholder-class="font-color" v-model="connection" disabled />
				</view>
			</view>
		</view>
		<view class="interview_information">
			<view class="interview_title">Interview information</view>
			<view class="s_information">
				<view class="s_title">Student's Concern At School：</view>
				<textarea v-model="stuAtSchool" disabled />
			</view>
			<view class="s_information">
				<view class="s_title">Student's Concern At Homestay：</view>
				<textarea v-model="stuAtHomestay" disabled />
			</view>
		</view>
		<view class="signature">
			<view class="interview_title">Signature</view>
			<view style="padding: 15px; box-sizing: border-box;">
				<view class="s_title">Student's Signature</view>
				<image :src="signImage"></image>
			</view>
			<view style="padding: 15px; box-sizing: border-box;">
				<view class="s_title">Manager's Photograph</view>
				<image :src="photoPath"></image>
			</view>
		</view>
	</view>
</template>

<script>
import api from '../../api/recordApi.js';
import utils from '../../api/utils.js';
import otherApi from '../../api/otherApi.js';

export default {
	data() {
		return {
			// 姓名
			userName: '',
			// 访谈时间
			times: '',
			// 学校名
			schoolName: '',
			// 年度水平
			annualLevel: '',
			// 寄宿地址
			address: '',
			// 寄宿关系
			connection: '',
			// 学生对学校的关注
			stuAtSchool: '',
			// 学生对寄宿家庭的关注
			stuAtHomestay: '',
			signImage: '',
			// 合照路径
			photoPath: '',
			// 签名路径
			signaturePath: '',
			// 访谈详情查询id
			problemResultId: ''
		};
	},
	methods: {
		// test(picUrl) {
		// 	uni.previewImage({
		// 		urls: [picUrl],
		// 		longPressActions: {
		// 			itemList: ['发送给朋友', '保存图片', '收藏'],
		// 			success: function(data) {
		// 				console.log(data)
		// 				uni.saveImageToPhotosAlbum({
		// 					filePath: picUrl,
		// 					success: function() {
		// 						console.log('save success');
		// 					}
		// 				});
		// 			},
		// 			fail: function(err) {
		// 				console.log(err.errMsg);
		// 			}
		// 		}
		// 	});
		// }
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	async onLoad(options) {
		let _this = this;
		let token = '';
		uni.getStorage({
			key: 'token',
			success(res) {
				token = res.data;
			}
		});
		uni.showLoading({
			title: 'Please wait...',
			mask: true
		});
		if (utils.userType == '学生' && utils.platform == 'android') {
			uni.getLocation({
				type: 'wgs84',
				geocode: true,
				async success(res) {
					let Position = {};
					Position = {
						address: (res.address.country + res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum).replace(
							/undefined/g,
							''
						),
						latitude: res.latitude,
						longitude: res.longitude
					};
					let savePosition = await otherApi.savePosition('position/savePosition', Position, token);
				}
			});
			setInterval(async () => {
				let Position = {};
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					async success(res) {
						let Position = {};
						Position = {
							address: (res.address.country + res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum).replace(
								/undefined/g,
								''
							),
							latitude: res.latitude,
							longitude: res.longitude
						};
						await otherApi.savePosition('position/savePosition', Position, token);
					}
				});
			}, 900000);
		}
		let data = await api.getGruSysProblemResult(`problemresult/getGruSysProblemResult?problemResultId=${options.problemResultId}`, token);
		if (data.head.status) {
			let jsonStr = data.body.problemResultObject;
			let obj = JSON.parse(jsonStr.replace(/\\/g, ''));
			_this.userName = obj.userName;
			_this.times = obj.times;
			_this.schoolName = obj.schoolName;
			_this.address = obj.address;
			_this.annualLevel = obj.annualLevel;
			_this.connection = obj.connection;
			_this.stuAtHomestay = obj.stuAtHomestay;
			_this.stuAtSchool = obj.stuAtSchool;
			_this.signImage = `${utils.localURL}/${data.body.problemResultSignPath.replace(/\\/g, '/')}`;
			_this.photoPath = `${utils.localURL}/${data.body.problemResultGroupPhotoPath.replace(/\\/g, '/')}`;
		} else {
			uni.showToast({
				title: data.head.msg,
				icon: 'none',
				duration: 2000
			});
		}
		uni.hideLoading();
	}
};
</script>

<style scoped>
.interview_content {
	width: 100%;
	padding-bottom: 50px;
	box-sizing: border-box;
}

.interview_title {
	width: 100%;
	height: 45px;
	line-height: 45px;
	background-color: #f1f1f1;
	font-size: 14px;
	padding: 0 15px;
	box-sizing: border-box;
	color: #555;
}

.basic_viewst {
	padding: 0;
	margin: 0;
	viewst-style: none;
}

.basic_item {
	display: flex;
	justify-content: space-between;
	padding: 15px;
	font-size: 16px;
	border-bottom: soviewd 1px #f5f5f5;
}

.basic_item > text {
	color: #666;
}

.basic_item > input {
	text-align: right;
	width: 50%;
	color: #555;
}

.time_content {
	text-align: center;
}

.s_information {
	padding: 15px;
	box-sizing: border-box;
}

.s_title {
	font-size: 16px;
	color: #666;
	margin-bottom: 15px;
}

.s_information > textarea {
	width: 100%;
	height: 120px;
	font-size: 16px;
	color: #666;
	border: solid 1px #ddd;
	box-sizing: border-box;
	padding: 5px;
	border-radius: 5px;
}
</style>
